<template>
  <div>
    基础标签的使用
		<!-- 头像组件 S -->
    <!-- <avatar-list size="mini">
      <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
      <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
      <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
    </avatar-list>

    <avatar-list :max-length="3">
      <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
      <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
      <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
      <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
      <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
      <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
      <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
    </avatar-list> -->
		<!-- 头像组件 E -->
		<!-- 图表组件 S -->
		<!-- <chart-card title="总销售量">
			<span slot="total">$ 100.00</span>
			<span>
				周同比 12%
			</span>
		</chart-card>
		<chart-card title="总销售量" :total="() => '$ 100.00'">
			<span>
				周同比 12%
			</span>
		</chart-card>
		<chart-card title="总销售量" total="$ 100.00">
			<span>
				周同比 12%
			</span>
		</chart-card> -->
		<!-- 图表组件 E -->
		<!-- 倒计时 S -->
    <!-- <count-down :target="new Date().getTime() + 3000000" :on-end="onEndHandle" /> -->
		<!-- 倒计时 E -->
		<!-- 底部工具栏 S -->
		<!-- <footer-tool-bar>
			<a-button type="primary" @click="validate" :loading="loading">提交</a-button>
		</footer-tool-bar>
		<footer-tool-bar extra="扩展信息提示">
			<a-button type="primary" @click="validate" :loading="loading">提交</a-button>
		</footer-tool-bar> -->
		<!-- 底部工具栏 E -->
		<!-- 数据文本 S -->
		<!-- <number-info
		:sub-title="() => { return 'Visits this week' }"
		:total="12321"
		status="up"
		:sub-total="17.1"></number-info> -->
		<!-- 数据文本 E -->
		<!-- 文本自动省略号 S -->
		<!-- <ellipsis :length="100" tooltip>
			There were injuries alleged in three cases in 2015, and a
			fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
		</ellipsis> -->
		<!-- 文本自动省略号 E -->
		<!-- 趋势标记 S -->
		<!-- <trend flag="up">5%</trend>
		<trend flag="up">
		<span slot="term">工资</span>
			5%
		</trend>
		<trend flag="down" term="工资">5%</trend> -->
		<!-- 趋势标记 E -->
		<a-button type="primary">
			Primary
		</a-button>
		<a-button>Default</a-button>
		<a-button type="dashed">
			Dashed
		</a-button>
		<a-config-provider :auto-insert-space-in-button="false">
			<a-button type="primary">
				按钮
			</a-button>
		</a-config-provider>
		<a-button type="primary">
			按钮
		</a-button>
		<a-button type="link">
			Link
		</a-button>
		<a-dropdown>
			<a class="ant-dropdown-link">
				Hover me <a-icon type="down" />
			</a>
			<a-menu slot="overlay">
				<a-menu-item>
					<a href="javascript:;">1st menu item</a>
				</a-menu-item>
			</a-menu>
		</a-dropdown>
		<a-input placeholder="Basic usage" />
		<a-input ref="userNameInput" placeholder="Basic usage">
			<a-icon slot="prefix" type="user" />
			<a-tooltip slot="suffix" title="Extra information">
				<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
			</a-tooltip>
		</a-input>
  </div>
</template>

<script>
import { AvatarList, ChartCard, CountDown, FooterToolBar, NumberInfo, Ellipsis, Trend } from '@/components'
const AvatarListItem = AvatarList.AvatarItem
export default {
  components: {
    AvatarList,
    AvatarListItem,
		ChartCard,
		CountDown,
		FooterToolBar,
		NumberInfo,
		Ellipsis,
		Trend
  },
  data () {
    return {}
  }
}
</script>

<style lang="less" scoped>

</style>
